<script setup>
import { reactive, ref } from 'vue'
import ListItem from "@/components/listItem.vue";
import {getRecordCom, getRecordStore} from '@/api'
import {onShow} from "@dcloudio/uni-app";

const userInfo = uni.getStorageSync('userInfo')
const dict = uni.getStorageSync('dict')
const dictIsCheck = {
  false: {
    text: '未检查',
    type: 'danger'
  },
  true: {
    text: '已检查',
    type: 'success'
  },
  null: {
    text: '未知',
    type: 'info'
  }
}
const pageData = reactive({
  activeTab: 0,
  loading: false,
  loadingBottom: false,
  listData: [],
  menu: [
    { text: `全部`, value: '' },
    { text: `已检查`, value: 1 },
    { text: `未检查`, value: 0 }
  ],
  queryListParams: {
    pageNum: 1,
    pageSize: 10,
    status: ''
  },
  total: 0,
  totalShare: 0,
  noMore: false,
  api: getRecordStore
})

const lower = async (e) => {
  if(pageData.listData.length >= pageData.total + pageData.totalShare) {
    pageData.noMore = true
    return
  }
  pageData.queryListParams.pageNum++
  pageData.loadingBottom = true
  await getList()
  pageData.loadingBottom = false
}
const onRefresh = async (e) => {
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  pageData.loading = true
  await getList()
  pageData.loading = false
}
const handleDetail = (i) => {
  console.log('gogo', i)
  if(i.isCheck) return
  const url = pageData.activeTab === 0 ? `/pages/storeInspection/detail?name=${i.name}&xqid=${i.xqid}&xqname=${i.xqname}` : `/pages/enterpriseInspection/detail?name=${i.name}&deptId=${i.deptId}&deptName=${i.deptName}`
  uni.navigateTo({
    url
  })
}

const changeTab = async (v) => {
  console.log('v', v)
  pageData.activeTab = v.paneKey - 0
  pageData.api = pageData.activeTab === 0 ? getRecordStore : getRecordCom
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  pageData.loading = true
  await getList()
  pageData.loading = false
}
const getList = (api) => {
  pageData.loading = true
  pageData.loadingBottom = true
  return pageData.api(pageData.queryListParams).then(res => {
    console.log(res)
    pageData.loading = false
    pageData.loadingBottom = false
    pageData.listData = [
      ...pageData.listData,
      ...res.rows
    ]
    pageData.total = res.total
  })
}
const changeStatus = async (v) => {
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  pageData.loading = true
  await getList()
  pageData.loading = false
}

const nav = (item) => {
  console.log('item', item)
  uni.openLocation({
    latitude: item.lat - 0,
    longitude: item.lon - 0,
    name: item.companyName,
    success: function (res) {
      console.log('success', res);
    },
    fail: function (err) {
      console.log('err', err)
    },
    complete: function (result) {
      console.log('result', result)
    }
  })
}

const createStoreCatch = ref({})
onShow(async () => {
  pageData.listData = []
  await getList()
  createStoreCatch.value = uni.getStorageSync('createStoreCatch')
})
</script>

<template>
  <nut-tabs v-model="pageData.activeTab" @click="changeTab">
    <nut-tab-pane title="场所" />
    <nut-tab-pane title="企业" />
  </nut-tabs>
  <view class="nav">
    <nut-row>
      <nut-col :span="12">
        <nut-menu>
          <nut-menu-item v-model="pageData.queryListParams.status" :options="pageData.menu" @change="changeStatus" />
        </nut-menu>
      </nut-col>
      <nut-col :span="12">
        <view style="display: flex;justify-content: center;align-items: center;height: 48px;">共{{ pageData.total }}条记录</view>
      </nut-col>
    </nut-row>
  </view>
  <scroll-view :scroll-top="0" :scroll-y="true" :refresher-enabled="true" class="list-body" @scrolltolower="lower" @refresherrefresh="onRefresh">
    <view v-if="pageData.listData.length">
      <list-item v-for="(item, index) in pageData.listData" :key="item.id" @click="handleDetail(item)">
        <template v-slot:left>
          {{ item.name }}
        </template>
        <template v-slot:right>
          <nut-tag :type="dictIsCheck[item.isCheck]?.type">{{ dictIsCheck[item.isCheck]?.text }}</nut-tag>
        </template>
        <template v-slot:desc>
          <view class="address" @tap.stop="nav(item)">
            <nut-icon name="location2" custom-color="#fa2c19" />
            {{ item.address }}
          </view>
          <view class="create-time">{{ item.checkdate }}</view>
        </template>
      </list-item>
    </view>
    <view v-if="pageData.loadingBottom === true && pageData.listData.length" class="loading-bottom">
      <nut-icon name="loading"></nut-icon>
    </view>
    <nut-empty v-if="pageData.loading === false && !pageData.listData.length" image="empty" description="无内容"></nut-empty>
    <view v-if="pageData.loading === true && !pageData.listData.length" class="loading-box">
      <nut-icon name="loading"></nut-icon>
    </view>
    <view v-if="pageData.listData.length >= pageData.total && pageData.listData.length !== 0" class="no-more">没有更多···</view>
  </scroll-view>
</template>

<style lang="scss">
.list-body{padding: 10px 0 80px;box-sizing:border-box;height: calc(100vh - 40px);}
.btn{position: fixed;bottom: 20px;width: 100%;padding: 0 40px;box-sizing: border-box;}
.loading-box{width: 100%;height: 300px;display: flex;justify-content: center;align-items: center;}
.loading-bottom{width: 100%;display: flex;justify-content: center;align-items: center;}
.no-more{display: flex;padding: 20px;justify-content: center;font-size: 12px;color: #aaa;}
</style>
<style>
.nut-tab-pane{display: none!important;}
.nut-list-item{height: auto!important;}
.desc view{display: flex;align-items: center;justify-content: space-between;}
.desc view .btn-nav{padding: 0 10px 0 0;}
.desc view .address{}
.desc view .create-time{font-size: 12px;}
.nav{background: #f0f0f0;}
.nav .nut-menu .nut-menu__bar{box-shadow: none;}
</style>
